﻿/**
 * @class app.ThreadList
 * @namespace app
 * @extends Ext.Panel
 */
app.ThreadList = function(configObj) {
    var thisObject = this;

    Ext.regModel('Thread', {
        fields: [
            'rest_id',
            'name',
            'rating',

        ]
    });

    var store = new Ext.data.Store({
        model: 'Thread',
        proxy: {
            type: 'ajax',
            url: 'http://glocalchinese.com/demo/index.php/restaurant/json?language=ch&city=london&section=restaurant&category=nearby&sortby=rating&latitude=51.490104&longitude=-0.042418',
            reader: {
                type:'json',
                root: 'restaurants'
               // totalCount: 'totalCount'
            }
        }
    });
    
    var topBar = new Ext.Toolbar({
        dock: 'top',
        title: 'Nearby',
        items: [{
				ui: 'plain',
				iconCls: 'home',
				iconMask: true,
				handler: function() {
					app.eventMgr.fireEvent('ForumList', null);
				}
			},
			{xtype: 'spacer'},
			{xtype: 'segmentedbutton',
			 allowDepress: true,
			 items: [{iconCls: 'locate', iconMask: true}, 
					 {iconCls: 'search', iconMask: true}]
		}]
    });
	var topBar2 = new Ext.Toolbar({
        dock: 'top',
        title: 'Cuisine',
        items: [{
				ui: 'plain',
				iconCls: 'home',
				iconMask: true,
				handler: function() {
					app.eventMgr.fireEvent('ForumList', null);
				}
			},
			{xtype: 'spacer'}]
    });
	var topBar3 = new Ext.Toolbar({
        dock: 'top',
        title: 'KTV',
        items: [{
				ui: 'plain',
				iconCls: 'home',
				iconMask: true,
				handler: function() {
					app.eventMgr.fireEvent('ForumList', null);
				}
			},
			{xtype: 'spacer'}]
    });
	var topBar4 = new Ext.Toolbar({
        dock: 'top',
        title: 'Takeaway',
        items: [{
				ui: 'plain',
				iconCls: 'home',
				iconMask: true,
				handler: function() {
					app.eventMgr.fireEvent('ForumList', null);
				}
			},
			{xtype: 'spacer'},
			{xtype: 'segmentedbutton',
			 allowDepress: true,
			 items: [{iconCls: 'locate', iconMask: true}, 
					 {iconCls: 'search', iconMask: true}]
		}]
    });
	var topBar5 = new Ext.Toolbar({
        dock: 'top',
        title: 'Favourite',
        items: [{
				ui: 'plain',
				iconCls: 'home',
				iconMask: true,
				handler: function() {
					app.eventMgr.fireEvent('ForumList', null);
				}
			},
			{xtype: 'spacer'}]
    });
	var tabPanel = new Ext.TabPanel({
		tabBar: {dock: 'bottom', layout: {pack: 'center'}},
		fullscreen: true,
		cardSwitchAnimation: {type: 'slide',cover: true},
		items: [{
			title: 'Nearby',
			iconCls: 'time',
			cls: 'card1',
			id: 'tab1',
			dockedItems: [topBar, {xtype: 'panel', dock: 'bottom', height: 48, html: ''}],
			items:[{layout: {type: 'vbox', align: 'stretch'}},
				   {xtype: 'button', text: 'Refresh', style: 'margin:.4em;'},
				   {
            			xtype: 'list',
						ui: 'round',
						scroll: true,
            			itemTpl: new Ext.XTemplate(
                			'<div class="thread">',
                    		'<div class="thread-title">',
                        	'{name}<br />',
                    		'</div>',
                    		'<div class="thread-replies">',
                        	'Replies: {rating}',
                    		'</div>',
                    		'<div class="thread-lastpost">',
                        	'',
                    		'</div>',
                			'</div>'
            			),
            			store: store,
            			onItemDisclosure: true,        
            			listeners: {
                			'disclose': function(item, node, index, eventObj){
                    			app.eventMgr.fireEvent(
                        		'SelectThread', 
                        		item.get('threadid'), 
                        		item.get('title')
                    			)
                			},
                			'destroy': function(thisComponent) {
                    			app.eventMgr.un('SelectForum', selectForum);
                    			app.eventMgr.un('BackToThreadList', backToThreadList);
                			}
            			}
        		   },	
			]
		},
		{
             title: 'Cuisine',
             cls: 'card2',
             iconCls: 'info',
             id: 'tab2',
			 dockedItems: [topBar2, {xtype: 'panel', dock: 'bottom', height: 48, html: ''}],
			items:[{layout: {type: 'vbox', align: 'stretch'}},
				   {
            			xtype: 'list',
						ui: 'round',
						scroll: true,
            			itemTpl: new Ext.XTemplate(
                			'<div class="thread">',
                    		'<div class="thread-title">',
                        	'{title}<br />',
                    		'</div>',
                    		'<div class="thread-replies">',
                        	'Replies: {replycount}',
                    		'</div>',
                    		'<div class="thread-lastpost">',
                        	'',
                    		'</div>',
                			'</div>'
            			),
            			store: store,
            			onItemDisclosure: true,        
            			listeners: {
                			'disclose': function(item, node, index, eventObj){
                    			app.eventMgr.fireEvent(
                        		'SelectThread', 
                        		item.get('threadid'), 
                        		item.get('title')
                    			)
                			},
                			'destroy': function(thisComponent) {
                    			app.eventMgr.un('SelectForum', selectForum);
                    			app.eventMgr.un('BackToThreadList', backToThreadList);
                			}
            			}
        		   },	
			]
        },
		{
             title: 'KTV',
             cls: 'card3',
             iconCls: 'info',
             id: 'tab3',
			 dockedItems: [topBar3, {xtype: 'panel', dock: 'bottom', height: 48, html: ''}],
			items:[{layout: {type: 'vbox', align: 'stretch'}},
				   {
            			xtype: 'list',
						ui: 'round',
						scroll: true,
            			itemTpl: new Ext.XTemplate(
                			'<div class="thread">',
                    		'<div class="thread-title">',
                        	'{title}<br />',
                    		'</div>',
                    		'<div class="thread-replies">',
                        	'Replies: {replycount}',
                    		'</div>',
                    		'<div class="thread-lastpost">',
                        	'',
                    		'</div>',
                			'</div>'
            			),
            			store: store,
            			onItemDisclosure: true,        
            			listeners: {
                			'disclose': function(item, node, index, eventObj){
                    			app.eventMgr.fireEvent(
                        		'SelectThread', 
                        		item.get('threadid'), 
                        		item.get('title')
                    			)
                			},
                			'destroy': function(thisComponent) {
                    			app.eventMgr.un('SelectForum', selectForum);
                    			app.eventMgr.un('BackToThreadList', backToThreadList);
                			}
            			}	
        		   },	
			]
        },
		{
             title: 'Takeaway',
             cls: 'card4',
             iconCls: 'info',
             id: 'tab4',
			 dockedItems: [topBar4, {xtype: 'panel', dock: 'bottom', height: 48, html: ''}],
			items:[
				   {xtype: 'segmentedbutton',
				    align: 'center',
					allowDepress: true,					
					style: 'margin: .4em;',
			 		items: [{text: 'Rating'}, 
					 		{text: 'Distance'},
							{text: 'Name'}]
		},
				   {
            			xtype: 'list',
						ui: 'round',
						scroll: true,
            			itemTpl: new Ext.XTemplate(
                			'<div class="thread">',
                    		'<div class="thread-title">',
                        	'{title}<br />',
                    		'</div>',
                    		'<div class="thread-replies">',
                        	'Replies: {replycount}',
                    		'</div>',
                    		'<div class="thread-lastpost">',
                        	'',
                    		'</div>',
                			'</div>'
            			),
            			store: store,
            			onItemDisclosure: true,        
            			listeners: {
                			'disclose': function(item, node, index, eventObj){
                    			app.eventMgr.fireEvent(
                        		'SelectThread', 
                        		item.get('threadid'), 
                        		item.get('title')
                    			)
                			},
                			'destroy': function(thisComponent) {
                    			app.eventMgr.un('SelectForum', selectForum);
                    			app.eventMgr.un('BackToThreadList', backToThreadList);
                			}
            			}		
        		   },	
			]
        },
		{
             title: 'Favourite',
             cls: 'card5',
             iconCls: 'favorites',
             id: 'tab5',
			 dockedItems: [topBar5, {xtype: 'panel', dock: 'bottom', height: 48, html: ''}],
			items:[{layout: {type: 'vbox', align: 'stretch'}},
				   {
            			xtype: 'list',
						ui: 'round',
						scroll: true,
            			itemTpl: new Ext.XTemplate(
                			'<div class="thread">',
                    		'<div class="thread-title">',
                        	'{title}<br />',
                    		'</div>',
                    		'<div class="thread-replies">',
                        	'Replies: {replycount}',
                    		'</div>',
                    		'<div class="thread-lastpost">',
                        	'',
                    		'</div>',
                			'</div>'
            			),
            			store: store,
            			onItemDisclosure: true,        
            			listeners: {
                			'disclose': function(item, node, index, eventObj){
                    			app.eventMgr.fireEvent(
                        		'SelectThread', 
                        		item.get('threadid'), 
                        		item.get('title')
                    			)
                			},
                			'destroy': function(thisComponent) {
                    			app.eventMgr.un('SelectForum', selectForum);
                    			app.eventMgr.un('BackToThreadList', backToThreadList);
                			}
            			}
        		   },	
			]
        },]
	});

	app.ThreadList.superclass.constructor.call(this, {
		dockedItems: [ tabPanel ]
    });

    function selectForum(forumId, forumName) {
        topBar.setTitle('Nearby');
        store.load({
            params: { 'forumId': forumId }
        });
        app.page.setActiveItem(1);
    }
	
    function backToThreadList() {
        app.page.setActiveItem(1, { type: 'slide', 'direction': 'right' });
    }

    app.eventMgr.on('SelectForum', selectForum);
    app.eventMgr.on('BackToThreadList', backToThreadList);
};
Ext.extend(app.ThreadList, Ext.Panel, {});